<template>
    <a-card style="margin-bottom: 20px;">
        <div class="children-container">
            <div v-for="(info, inx) in children" :key="inx">
                <a :href="info.linkurl" target="_blank" class="card_href">
                    <a-card-grid class="a-card-grid">
                        <img :src="info.icon" @error="handleImageError">
                        <div class="card-text" :data-tooltip="info.name">{{info.name}}</div>
                    </a-card-grid>
                </a>
            </div>
        </div>
    </a-card>
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router';
import { jsondata } from '../../mock/JsonData'

const route = useRoute(); // 直接使用 useRoute()
const toolInfo = reactive(jsondata)
const children = reactive([])

//  图片加载失败显示的图片
const handleImageError = (event: Event) => {
    const target = event.target as HTMLImageElement;
    target.src = 'https://gitee.com/xiaomao12/images/raw/master/img/load_fail.png';
};

const loadToolInfo = (param) => {
    toolInfo.forEach(r =>{
        if(r.short === param){
            children.length = 0;  // 清空数组
            children.push(...r.children)  // 将新的内容推入
            return
        }
    })
}

// 使用 watchEffect 来监听 route 的变化
watchEffect(() => {
    loadToolInfo(route.name)
});
</script>

<style lang="less" scoped>
img{
    width: 30px;
    height: 30px;
}

.children-container {
    display: flex;
    flex-wrap: wrap;

    /* 当屏幕小于一定宽度时，调整卡片宽度 */
    .a-card-grid {
        margin: 8px 8px;
        width: var(--width-text);  /* 初始宽度 */
        height: 60px;
        display: flex;
        align-items: center;
        border-radius: 5px;
        font-weight: 600;
        color: var(--color-text);
    }

    /* 卡片文字的样式 */
    .card-text {
        white-space: nowrap;      /* 禁止换行 */
        overflow: hidden;         /* 隐藏溢出部分 */
        text-overflow: ellipsis;  /* 显示省略号 */
        text-align: center;       /* 居中文本 */
    }
    
    .card-text:hover::after {
        content: attr(data-tooltip); /* 显示 tooltip 的内容 */
        position: absolute;
        bottom: 100%; /* 显示在元素上方 */
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        padding: 5px;
        border-radius: 4px;
        z-index: 10;
        white-space: normal;  /* 防止 tooltip 内容溢出 */
        max-width: 200px;     /* 设置最大宽度，防止 tooltip 过长 */
        word-wrap: break-word; /* 确保长文本在 tooltip 中换行 */
    }

    /* 媒体查询：当屏幕宽度小于 768px 时 */
    @media screen and (max-width: 768px) {
        .a-card-grid {
            width: 48%;  /* 在小屏幕上卡片宽度变为 48% */
        }
    }

    /* 媒体查询：当屏幕宽度小于 480px 时 */
    @media screen and (max-width: 480px) {
        .a-card-grid {
            width: 100%;  /* 在非常小的屏幕上每行只显示一个卡片 */
        }
    }
}
</style>